<template>
	<view class="flex-col page">
		<view class="flex-col section space-y-50">
			<view class="flex-row justify-center items-center relative group">
				<image class="image pos" @click="backpage"
					src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796370892020948020.png" />
				<text class="text">添加设备</text>
			</view>
			<view class="flex-col section_2 space-y-31">
				<text class="self-start font_1">设备号</text>
				<view class="flex-col justify-start items-start text-wrapper">
					<u-input disabled v-model="timevalue" class="font_2 text_2" :type="type" :border="border"
						@click="timeshow = true" placeholder="请输入设备号" />
					<u-action-sheet :list="timeList" v-model="timeshow" @click="timeCallback">
					</u-action-sheet>
				</view>
			</view>
		</view>
		<view class="flex-col relative group_2 space-y-556">
			<view class="flex-col section_3">
				<view class="flex-row justify-between items-center group_3">
					<text class="font_1">桌位号</text>
				</view>
				<view class="inp">
					<view class="flex-row justify-between items-center section_5 view"
						style="width: 315px;height: 40px;">
						<u-input v-model="value" clearable placeholder="请输入(0~8的整数)桌位号" type="text"
							style="width: 200px;" />
					</view>
				</view>
			</view>
			<view class="flex-col section_3">
				<view class="flex-row justify-between items-center group_3">
					<text class="font_1">桌台类型</text>
				</view>
				<view class="inp">
					<view class="flex-row justify-between items-center section_5 view"
						style="width: 315px;height: 40px;">

						<u-input v-model="qwe" style="width: 200px;" disabled @click="typeshow = true" />
						<u-select v-model="typeshow" :list="list" @confirm="confirm">{{qwe}}</u-select>
					</view>
				</view>
			</view>
			<view class="flex-col section_3">
				<view class="flex-row justify-between items-center group_3">
					<text class="font_1">桌台名称</text>
				</view>
				<view class="inp">
					<view class="flex-row justify-between items-center section_5 view"
						style="width: 315px;height: 40px;">
						<u-input v-model="tablename" clearable placeholder="请输入桌台名称" type="text"
							style="width: 200px;" />
					</view>
				</view>
			</view>

			<view class="flex-col section_3">
				<view class="flex-row justify-center items-center section_13 space-x-18" @click="addrule">
					<image class="image_6"
						src="https://gongxiangtaiqiu.axa2.com/taiqiu/eabdcbe5afd9a2a630fb7e9570c73680.png" />
					<text class="font_1" style="margin-left: 20rpx;">添加收费规则</text>
				</view>
				<view class="flex-col section_14">
					<view class="flex-row justify-between self-center equal-division">
						<view class="flex-row space-x-9">
							<image class="shrink-0 image_7"
								src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796433429837403706.png" />
							<text class="font_1 text_6">时间段</text>
						</view>
						<view class="flex-row space-x-9">
							<image class="shrink-0 image_7"
								src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796433429764998135.png" />
							<text class="font_1 text_6">收费标准</text>
						</view>
					</view>
					<view class="flex-row justify-between items-center group_4" style="margin:20rpx;"
						v-for="(item,index) in ruleList" @click="rules(item,index)">
						<text class="font_2">{{item.start}}-{{item.end}}</text>
						<text class="font_1 text_7">{{item.money}}元/小时</text>
					</view>
				</view>
			</view>
			<!-- 添加规则 -->
			<u-modal v-model="ruleshow" title="添加收费规则" confirm-text="确认添加" confirm-color="#19C865"
				:title-style="{color:'black'}" @confirm="ruleconfirm" :mask-close-able="true">
				<view class="rule-content">
					<view
						style="display: flex; justify-content: center; align-items: center; width: 270px; height: 72px;">
						<view>时间段：</view><input class="time" v-model="starttime" />
						<view>--</view><input class="time" v-model="endtime" />
					</view>
					<view style="display: flex; align-items: center; width: 270px; height: 72px;">
						<view>价格：</view><input class="time" v-model="money" />
						<view style="margin-left: 5px;">元/小时</view>
					</view>
				</view>
			</u-modal>
			<!-- 修改规则 -->
			<u-modal v-model="ruleshow1" title="收费规则" confirm-color="#19C865" :title-style="{color:'black'}"
				:show-cancel-button="true" @confirm="amendconfirm" :mask-close-able="true"
				confirm-text="删除">
				<view class="rule-content">
					<view
						style="display: flex; justify-content: center; align-items: center; width: 270px; height: 72px;">
						<view>时间段：</view><input class="time" v-model="amend_start" />
						<view>--</view><input class="time" v-model="amend_end" />
					</view>
					<view style="display: flex; align-items: center; width: 270px; height: 72px;">
						<view>价格：</view><input class="time" v-model="amend_money" />
						<view style="margin-left: 5px;">元/小时</view>
					</view>
				</view>
			</u-modal>

			<view class="flex-row space-x-30">
				<view class="flex-col justify-start items-center text-wrapper_3" @click="add"><text
						class="text_5">保存</text></view>
			</view>
			<u-modal v-model="show" title="温馨提示" :show-cancel-button="true" confirm-color="#19C865"
				:title-style="{color: 'black'}">
				<view class="slot-content">
					您要删除A01设备以及设备下所有的桌位吗？
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				id: '',
				ruleshow: false, //规则
				ruleshow1: false, //规则
				timevalue: '',
				timeshow: false,
				timeList: [],
				show: false,
				show1: false,
				value: '',
				unid: '',
				tablename: '',
				starttime: '',
				endtime: '',
				money: '',
				emoney: '',
				ruleList: [],
				amend_start: '',
				amend_money: '',
				amend_end: '',
				amend_emoney: '',
				type: '',
				index:'',
				qwe: '请选择桌台类型',
				typeshow: false,
				list: [{
						value: '1',
						label: '台球'
					},
					{
						value: '2',
						label: '麻将'
					}
				],
			};
		},
		onLoad() {
			this.equipment()
			// this.rule()
		},
		methods: {
			//添加显示弹窗
			addrule() {
				this.ruleshow = true;
				this.starttime = ''
				this.endtime = ''
				this.money = ''
			},
			//添加规则按钮
			ruleconfirm(e) {
				this.$Api.getUnitPrice({
					money: this.money,
				}).then(res => {
					this.emoney = res.data.data
					console.log(this.emoney, 'emoney的金额')
					// this.addList()
					let newList = {
						start: this.starttime,
						end: this.endtime,
						money: this.money,
						emoney: this.emoney,
					}
					this.ruleList.push(newList) //unshift()在数组头部添加一条数据 
					console.log(this.ruleList)
					console.log(this.starttime, this.endtime, this.money, this.emoney, uni.getStorageSync(
						'shop_id'))
				});




			},
			//修改规则按钮
			amendconfirm(e) {
				this.ruleList.splice(this.index, 1)
				 console.log(this.ruleList,'新this.ruleList');
				// console.log(this.amend_money, '修改时候的金额')
				// this.$Api.getUnitPrice({
				// 	money: this.amend_money,
				// }).then(res => {
				// 	this.amend_emoney = res.data.data
				// 	// this.amendList()

				// });
			},
			//删除按钮
			cancel() {
				this.ruleList.splice(this.index, 1)
				 console.log(this.ruleList,'新this.ruleList');
				// this.$Api.delEqRule({
				// 	id: this.id,
				// }).then(res => {
				// 	this.rule()
				// });
			},
			//改规则显示弹窗
			rules(item,index) {
				console.log(item,index)
				this.index = index 
				this.amend_start = item.start
				this.amend_money = item.money
				this.amend_end = item.end
				this.id = item.id
				this.ruleshow1 = true;
			},
			//修改设备
			amendList() {
				console.log(this.money, '提交')
				this.$Api.eqLinkRule({
					start: this.amend_start,
					end: this.amend_end,
					money: this.amend_money,
					emoney: this.amend_emoney,
					shopId: uni.getStorageSync('Bshop_id'),
					id: this.id
				}).then(res => {
					this.rule()
				});
			},
			//添加设备
			addList() {
				this.$Api.eqLinkRule({
					start: this.starttime,
					end: this.endtime,
					money: this.money,
					emoney: this.emoney,
					shopId: uni.getStorageSync('Bshop_id'),
				}).then(res => {
					// this.rule()

					console.log(res.data.data, 'addList')
				});
			},
			//根据设备获取规则
			rule() {
				this.$Api.getEqRule({
					shopId: uni.getStorageSync('Bshop_id'),
				}).then(res => {
					this.ruleList = res.data.data
					console.log(res.data.data, '规则列表')
				})
			},
			confirm(e) {
				console.log(e)
				this.qwe = e[0].label
				this.type = e[0].value
			},
			timeCallback(index) {
				this.timevalue = this.timeList[index].text;
				this.unid = this.timeList[index].id;
			},
			//设备列表
			equipment() {
				this.$Api.EqList({
					shopId: uni.getStorageSync('Bshop_id'),
					page: 1,
					pageNum: 15,
					type: 1
				}).then(res => {
					let arr = res.data.data.list
					this.timeList = arr.map(item => {
						console.log(item.f_union_code)
						return {
							text: item.f_union_code,
							id: item.id
						}
					})
				})
			},
			addtable() {
				this.show1 = true;
			},
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			},
			add() {
				if (this.unid == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入设备号'
					})
					return
				}
				if (this.value == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入(0~8的整数)桌位号'
					})
					return
				}
				if (this.type == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择桌台类型'
					})
					return
				}
				if (this.tablename == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入桌台名称'
					})
					return
				}
				 console.log(this.ruleList,'提交的时候ruleList');
				//创建设备对应的终端（桌台）
				this.$Api.createIo({
					eqId: this.unid, //设备id
					eqNo: this.value, //（桌台）终端号码
					eqName: this.tablename, //名称
					type: this.type, //1 台球  2棋牌
					data:JSON.stringify(this.ruleList),
					// start: this.starttime,
					// end: this.endtime,
					// money: this.money,
					// emoney: this.emoney,
					shopId: uni.getStorageSync('Bshop_id'),

				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'success',
							title: '创建成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)

					}
				})

			}

		},
	};
</script>

<style>
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/
	page {
		background-color: #f3f3f5;
	}

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	/deep/ .u-drawer-content {
		height: 300px !important;
		overflow-y: scroll !important;
	}

	/deep/ .u-drawer.data-v-52d4ddd1 {
		display: block;
		position: fixed;
		top: 200px !important;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.equal-division {
		width: 486rpx;
	}

	.slot-content {
		width: 260px;
		height: 40px;
		margin: 20px;
		text-align: center;
	}

	.time {
		border: 1px solid #dddddd;
		border-radius: 8rpx;
		width: 198rpx;
		height: 80rpx;
		padding-left: 20rpx;
	}

	.rule-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding-left: 30rpx;
	}

	.image_6 {
		width: 44rpx;
		height: 44rpx;
	}

	.image_7 {
		width: 30rpx;
		height: 30rpx;
	}

	.text_5 {
		line-height: 27rpx;
	}

	.text_6 {
		line-height: 27rpx;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.btn {
		width: 60px;
		height: 36px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #19c865;
		color: aliceblue;
		font-size: 15px;
	}

	.inp {
		display: flex;
		/* width: 330px; */
		height: 50px;
		justify-content: space-around;
		align-items: center;
	}

	.space-x-9>view:not(:first-child),
	.space-x-9>text:not(:first-child),
	.space-x-9>image:not(:first-child) {
		margin-left: 9rpx;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.page {
		padding-bottom: 61rpx;
		background-color: #f3f3f5;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		padding: 105rpx 30rpx 305rpx;
		background-image: linear-gradient(0deg, #f3f3f5 0%, #19c865 61%, #19c865 100%);
	}

	.space-y-50>view:not(:first-child),
	.space-y-50>text:not(:first-child),
	.space-y-50>image:not(:first-child) {
		margin-top: 50rpx;
	}

	.group {
		padding: 4rpx 0;
	}

	.image {
		width: 20rpx;
		height: 35rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 28rpx;
	}

	.section_2 {
		padding: 41rpx 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.space-y-31>view:not(:first-child),
	.space-y-31>text:not(:first-child),
	.space-y-31>image:not(:first-child) {
		margin-top: 31rpx;
	}

	.font_1 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 500;
		color: #222222;
	}


	.text-wrapper {
		/* padding: 17rpx 0; */
		background-color: #ffffff;
		border-radius: 8rpx;
		border: solid 1rpx #dddddd;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 500;
		color: #222222;
	}

	.text_2 {
		margin-left: 28rpx;
	}

	.group_2 {
		margin-top: -286rpx;
		padding: 0 30rpx;
	}

	.space-y-556>view:not(:first-child),
	.space-y-556>text:not(:first-child),
	.space-y-556>image:not(:first-child) {
		margin-top: 20rpx;
	}

	.section_13 {
		padding: 40rpx 0;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_3 {
		padding: 0 30rpx 51rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.group_3 {
		padding: 28rpx 0 32rpx;
	}

	.section_4 {
		padding: 12rpx 14rpx;
		background-color: #19c865;
		border-radius: 8rpx;
		height: 48rpx;
	}

	.section_14 {
		padding: 38rpx 0 51rpx 29rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}


	.space-x-6>view:not(:first-child),
	.space-x-6>text:not(:first-child),
	.space-x-6>image:not(:first-child) {
		margin-left: 6rpx;
	}

	.image_2 {
		width: 26rpx;
		height: 26rpx;
	}

	.text_3 {
		margin-right: 3rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 23rpx;
	}

	.section_5 {
		padding: 28rpx 29rpx 32rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		border: solid 1rpx #dddddd;
	}

	.image_3 {
		width: 27rpx;
		height: 27rpx;
	}

	.view {
		margin-top: 27rpx;
	}

	.view_2 {
		margin-top: 28rpx;
	}

	.space-x-30>view:not(:first-child),
	.space-x-30>text:not(:first-child),
	.space-x-30>image:not(:first-child) {
		margin-left: 30rpx;
	}

	.text-wrapper_2 {
		padding: 30rpx 0;
		flex: 1 1 330rpx;
		background-color: #ffffff;
		border-radius: 44rpx;
		height: 88rpx;
	}

	.text_4 {
		font-weight: 700;
		line-height: 29rpx;
	}

	.text-wrapper_3 {
		padding: 30rpx 0;
		flex: 1 1 330rpx;
		background-color: #19c865;
		border-radius: 44rpx;
		height: 88rpx;
	}

	.text_5 {
		color: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 29rpx;
	}
</style>
